<template>
  <div>

    <SkyCardPanel title="金额千分位指令">
      <div slot="main">
        <div class="main">

          <sky-input v-thousands.money="form1" v-model.trim="form1.money"></sky-input>

          <div style="height:30px"></div>

          <sky-input v-thousands.money="form2.workInfo" v-model.trim="form2.workInfo.money"></sky-input>

        </div>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">

          &lt;sky-input
            v-thousands.money="form1"
            v-model.trim="form1.money"
          &gt;&lt;/sky-input&gt;   
    

          &lt;sky-input
              v-thousands.money="form2.workInfo"
              v-model.trim="form2.workInfo.money"
           &gt;&lt;/sky-input&gt;


          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">

            export default {
              data () {
                return {
                  form1:{
                    money:18882.0252
                  },
                  form2:{
                    workInfo:{
                      money:""
                    }
                  },
                }
              },
            }        

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="比率百分位指令">
      <div slot="main">
        <div class="main">

          <sky-input v-rate.rate="form1" v-model.trim="form1.rate"></sky-input>

        </div>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">


            &lt;sky-input
              v-rate.rate="form1"
              v-model.trim="form1.rate"
            &gt;&lt;/sky-input&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">

            export default {
              data () {
                return {
                  form1:{
                    rate:0.43
                  },
                }
              },
            }        

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="自定义输入校验">
      <div slot="main">
        <div class="main">

          <sky-input v-verify="check" v-model.trim="form1.number" placeholder="请输入数字"></sky-input>

        </div>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">


            &lt;sky-input
              v-verify="check"
              v-model.trim="form1.number"
              placeholder="请输入数字"
            &gt;&lt;/sky-input&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">

            export default {
                data() {
                    return {
                      form1:{
                        number:"",
                      },
                    };
                  },

                  methods:{
                    check(val){
                      console.log("当前输入的值",val)
                      return "校验后返回正确值"
                    }
                  }
              
            }        

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>

  export default {
    data () {
      return {
        form1: {
          money: 18882.0252,
          rate: 0.43,
          number: "",
        },
        form2: {
          workInfo: {
            money: ""
          }
        },
      }
    },
    methods: {
      check (val) {
        console.log("当前输入的值", val)
        return "校验后返回正确值"
      }
    }
  }
</script>